<template>
  <div class="map">
    <open-map></open-map>
    <open-control></open-control>
  </div>
  <div class="nav">
    <el-menu
      :default-active="store.activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">视频监控</el-menu-item>
      <el-sub-menu index="2">
        <template #title>管理事件</template>
        <el-menu-item index="2-1">添加事件</el-menu-item>
        <el-menu-item index="2-2">查询事件</el-menu-item>
        <el-menu-item index="2-3">更新事件</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3">发布公告</el-menu-item>
      <el-menu-item index="4">路况信息</el-menu-item>
    </el-menu>
  </div>
  <fbgg-dialog></fbgg-dialog>
  <lkxx-dialog></lkxx-dialog>
  <tjsj-dialog></tjsj-dialog>
  <cxsj-dialog></cxsj-dialog>
  <xgsj-dialog></xgsj-dialog>
  <spjk-dialog></spjk-dialog>
</template>

<script setup>
import OpenMap from '../../components/OpenMap.vue'
import OpenControl from '../../components/OpenControl.vue'
import FbggDialog from './components/FbggDialog.vue'
import LkxxDialog from './components/lkxxDialog.vue'
import TjsjDialog from './components/tjsjDialog.vue'
import CxsjDialog from './components/CxsjDialog.vue'
import XgsjDialog from './components/XgsjDialog.vue'
import SpjkDialog from './components/SpjkDialog.vue'
import { useUsersStore } from '@/stores/user'
import { useGlobalMap } from '@/utils/globalMap.js'
// import NavTable from '../../components/NavTable.vue'
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { createDraw } from '@/zondy_api/draw.js'
const store = useUsersStore()
const {
  spjkDialog,
  xgsjDialog,
  cxsjDialog,
  finishaddenvent,
  fbggDialog,
  activeIndex,
  lkxxDialog,
  tjsjDialog,
  positionPoint,
  positionBox,
} = storeToRefs(store)
var map
var source
var layer
let draw
onMounted(() => {
  map = useGlobalMap()

  //创建图层
  source = new ol.source.Vector({})
  layer = new ol.layer.Vector({
    source,
  })
  map.addLayer(layer)
  //创建画笔
  draw = createDraw({
    type: 'Box',
    source,
  })
})

watch(
  () => store.cxsjDialog,
  () => {
    if (!store.cxsjDialog) {
      source.clear()
      map.removeInteraction(draw)
    }
  }
)
watch(
  () => store.tjsjDialog,
  () => {
    if (!store.tjsjDialog) {
      source.clear()
      map.un('click', mappoint)
    }
  }
)

//打开添加事件弹窗
const mappoint = (evt) => {
  store.positionPoint = evt.coordinate
  store.tjsjDialog = true
  store.activeIndex = '2-1'
}
//修改事件的方法

const handleSelect = (key) => {
  switch (key) {
    case '1':
      store.spjkDialog = true
      store.activeIndex = '1'
      break
    case '2-1':
      map.on('click', mappoint)
      break
    case '2-2':
      map.addInteraction(draw)
      draw.on('drawend', function (evt) {
        source.clear()
        store.positionBox = evt.feature.getGeometry()
        store.cxsjDialog = true
        store.activeIndex = '2-2'
      })
      break
    case '2-3':
      store.xgsjDialog = true
      store.activeIndex = '2-3'
      break
    case '3':
      store.fbggDialog = true
      store.activeIndex = '3'
      break
    case '4':
      store.lkxxDialog = true
      store.activeIndex = '4'
      break
    default:
      break
  }
}
</script>

<style scoped>
.map {
  margin-top: 40px;
}
.el-menu.el-menu--horizontal.el-menu-demo {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 40px;
}
.nav {
  position: fixed;
  z-index: 1000;
}
</style>
